<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏弹出效果</title>
		<style>
			/* 结合实际html结构--通配【合理】 */
			*{
				font: 16px "楷体";
				/* 去掉内外边距 */
				margin: 0;
				padding: 0;
				/* 无序列表：有样式---“去一个样式：列表项” */
				list-style-type: none;
				/* 无序列表：有样式---
				去全部样式：list-style-tyle 去列表项样式
				           list-style-position 去列表项标记位置样式
						   list-style-image   去列表项图片标记样式
				 
				 */
				list-style: none;					
			}
			/* 左栏空间区域 */
			        aside {
			            width: 235px;
			            height: 450px;
			            background-color: #f5f5f5;
			        }
			
			        /* 左栏区域内容【li】 */
			        .sideber li {
			            width: 235px;
			            height: 50px;
			            position: relative;
			            line-height: 50px;
			            text-indent: 20px;
			            /* 鼠标指针样式 */
			            cursor: pointer;
						 text-align: center;
			        }
			
			        /* 鼠标移动上去改背景颜色 */
			        .sideber li:hover {
			            background-color: #e0e0e0;
			        }
			
			        /* 弹出框样式 */
			        .out {
			            display: none;
			            position: absolute;
			            left: 235px;
			            top: 0;
			            width: 200px;
			            height: 460px;
			            background-color: #fff;
			            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
			        }
			
			        /* 鼠标悬停在 li 上时显示弹出框 */
			        .sideber li:hover .out {
			            display: block;
			        }
			/** 左栏效果
			 *  1.左栏空间区域  235*460   背景加权
			 *  2.左栏区域内容【li】  加权 235*50 相对定位--挂靠点 【固定位置】
			 *  3.给每个区域内容【li】 加鼠标移动上去改背景颜色
			 */
		</style>
	</head>
	<body>
		<!-- html结构 结构化标记【语义化标签】  
		aside元素 针对：左栏、广告、弹出效果....有利于SEO优化 
		之前版本通过div+id起别名方式【缺点：繁琐、定义起名、冗余】
		-->
		<aside>
			<ul class="sideber">
				<!-- 弹出框 -->
				<div class="out"></div>
				<li>手机</li>
				<li>电脑</li>
				<li>家具</li>
				<li>男装</li>
				<li>女装</li>
				<li>美妆</li>
				<li>房产</li>
				<li>母婴</li>
				<li>食品</li>
			</ul>
		</aside>
	</body>
</html>